import { useState } from 'react';
import EnterpriseTop from '../../components/EnterpriseTop/index';
import Enquirenow from '../../components/EnquireNow/Enquirenow';
import BoxAnimation from '../../components/Animations/Animations';
import ImageSlider from '../../components/ImageSlider/ImageSlider';
import CarouselSwitching from '../../components/CarouselSwitching/CarouselSwitching';
import ImageMarquee from '../../components/Marquee/ImageMarquee';
import FAQComponent from '../../components/FAQ/FAQ';
import './EnterpriseServices.css';

const carouselData = [
    {
        image: 'https://cdn.dancf.com/fe-assets/20231123/58c35764824aa5a9328fe6f875cfd9a1.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
        title: '品牌IP',
        color: '#ffd542',
    },
    {
        image: 'https://cdn.dancf.com/fe-assets/20231123/277df1172edd214069a61546178e6ea5.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
        title: '营销设计',
        color: '#c86bd4',
    },
    {
        image: 'https://cdn.dancf.com/fe-assets/20231123/106097d363efe1bd2f3dea874ef87895.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
        title: '包装设计',
        color: '#1effd6',
    },
    {
        image: 'https://cdn.dancf.com/fe-assets/20231123/390c051fb5179fa858b60cab928e38c3.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
        title: '设计赛事',
        color: '#3284ff',
    },
];

const EnterpriseServices = () => {
    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const iscancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div>
            {/* 顶部导航 */}
            <EnterpriseTop />

            {/* 首屏视频动画 */}
            <div className='mainvideo' id='myVideo'>
                <video src="https://cdn.dancf.com/fe-assets/20231204/ac0f2eb25a81c4ec41964ed319a08eb7.webm"
                    muted
                    autoPlay
                    loop
                    style={{ width: '100%', height: '100%' }}
                ></video>
                <div className='consultation'>
                    <h2>视觉内容创新方案<br></br>驱动企业营销增长</h2>
                    <div className='number'>
                        全链路数字化内容中台，助力企业营销降本增效，为数字化时代<br />
                        快速迭代的内容营销持续赋能
                    </div>
                    <button className='Enquirenow' onClick={showModal}>立即咨询</button>
                    {/* 弹框 */}
                    <Enquirenow isModalOpen={isModalOpen} iscancel={iscancel}></Enquirenow>
                </div>
            </div>

            <div>
                <FAQComponent />
            </div>

            {/* 一站式服务 */}
            <div className='BoxAnimation'>
                <div>
                    <p style={{ fontSize: '40px', fontWeight: '600', textAlign: 'center', padding: '60px  0' }}>
                        一站式服务 <br />
                        搭建企业视觉内容新基建
                    </p>
                </div>
                <BoxAnimation />
            </div>

            {/* 进度条轮播图 */}
            <div className='ImageSlider'>
                <ImageSlider />
            </div>

            {/* 轮播切换 */}
            <div className='CarouselSwitching'>
                <CarouselSwitching data={carouselData} />
            </div>

            {/* 跑马灯 */}
            <div className='Marquee'>
                <h2 style={{ textAlign: 'center', padding: '60px 0', fontSize: '40px' }}>众多企业携手稿定共建内容力</h2>
                <ImageMarquee />
            </div>
        </div>
    )
}

export default EnterpriseServices